{% load static %}
<!doctype html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>流量计远程抄表管理系统</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <!-- <link rel="stylesheet" href="./css/theme5.css"> -->
    <script src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/js/xadmin.js"></script>
    <script type="text/javascript" src="/static/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
    <script src="/static/js/flow-meter.js" charset="utf-8"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    <script>
        // 是否开启刷新记忆tab功能
        // var is_remember = false;
    </script>
</head>
<body class="index">
<!-- 顶部开始 -->
<div class="container">
    <div class="logo">
        <a href="./index.html">流量计远程抄表管理系统</a></div>
    <div class="left_open">
        <a><i title="展开左侧栏" class="iconfont">&#xe699;</i></a>
    </div>
    <ul class="layui-nav left fast-add" lay-filter="">
        <li class="layui-nav-item">

        </li>
    </ul>
    <ul class="layui-nav right" lay-filter="">
        <li class="layui-nav-item">
            <a href="javascript:;">{{ user.name }}</a>
            <dl class="layui-nav-child">
                <!-- 二级菜单 -->
                <dd>
                    <a href="/logout">退出</a>
                </dd>
            </dl>
        </li>
        <li class="layui-nav-item to-index">
        </li>
    </ul>
</div>
<!-- 顶部结束 -->
<!-- 中部开始 -->
<!-- 左侧菜单开始 -->
<div class="left-nav">
    <div id="side-nav">
        <ul id="nav">
            {% for nav in nav_bars %}
                <li>
                    {% if nav.url %}
                        <a onclick="xadmin.add_tab('{{ nav.name }}','{{ nav.url }}',true)">
                            <i class="iconfont left-nav-li" lay-tips="{{ nav.name }}">&#{{ nav.icon }};</i>
                            <cite>{{ nav.name }}</cite>
                        </a>
                    {% endif %}
                    {% if not nav.url %}
                        <a>
                            <i class="iconfont left-nav-li" lay-tips="{{ nav.name }}">&#{{ nav.icon }};</i>
                            <cite>{{ nav.name }}</cite>
                        </a>
                    {% endif %}
                    {% if nav.childs %}
                        <ul class="sub-menu">
                            {% for child_nav in nav.childs %}
                                <li>
                                    <a onclick="xadmin.add_tab('{{ child_nav.name }}','{{ child_nav.url }}', true)">
                                        <i class="iconfont">&#{{ child_nav.icon }};</i>
                                        <cite>{{ child_nav.name }}</cite>
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </li>
            {% endfor %}
        </ul>
    </div>
</div>
<!-- <div class="x-slide_left"></div> -->
<!-- 左侧菜单结束 -->
<!-- 右侧主体开始 -->
<div class="page-content">
    <div class="layui-tab tab" lay-filter="xbs_tab" lay-allowclose="false">
        <ul class="layui-tab-title">
            <li class="home">
                <i class="layui-icon">&#xe68e;</i>首页
            </li>
        </ul>
        <div class="layui-unselect layui-form-select layui-form-selected" id="tab_right">
            <dl>
                <dd data-type="this">关闭当前</dd>
                <dd data-type="other">关闭其它</dd>
                <dd data-type="all">关闭全部</dd>
            </dl>
        </div>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                {% if user.role ==  'admin' %}
                    <iframe src='/statistic/admin/' frameborder="0" scrolling="yes" class="x-iframe"></iframe>
                {% endif %}
                {% if user.role ==  'manufacturer' %}
                    <iframe src='/statistic/manufacturer/' frameborder="0" scrolling="yes" class="x-iframe"></iframe>
                {% endif %}
                {% if user.role ==  'dtu_user' %}
                    <iframe src='/statistic/dtu_user/' frameborder="0" scrolling="yes" class="x-iframe"></iframe>
                {% endif %}
            </div>
        </div>
        <div id="tab_show"></div>
    </div>
</div>
<div class="page-content-bg"></div>
<style id="theme_style"></style>
<!-- 右侧主体结束 -->
<!-- 中部结束 -->

</body>
<script>

    layui.config({
        base: '/static/dist/'
    }).extend({
        notice: 'notice'
    });

    layui.use(['notice', 'jquery', 'layer', 'table', 'element'], function () {
        var notice = layui.notice;
        var layer = layui.layer;
        var $ = layui.jquery;
        var element = layui.element;

        notice.options = {
            closeButton: true,//显示关闭按钮
            debug: false,//启用debug
            positionClass: "toast-top-right",//弹出的位置,
            showDuration: "300",//显示的时间
            hideDuration: "1000",//消失的时间
            timeOut: "0",//停留的时间
            extendedTimeOut: "0",//控制时间
            showEasing: "swing",//显示时的动画缓冲方式
            hideEasing: "linear",//消失时的动画缓冲方式
            iconClass: 'toast-info', // 自定义图标，有内置，如不需要则传空 支持layui内置图标/自定义iconfont类名
            onclick: null// 点击关闭回调
        };

        //all_alarm_list = [];

        if ("WebSocket" in window) {

            open_falg = false;

            alarms = Array();

            function connect() {
                // 打开一个 web socket
                ws = new WebSocket("ws://" + window.location.host + ":{{ websocket_port }}/websocket/");

                ws.onopen = function () {
                    // Web Socket 已连接上，使用 send() 方法发送数据
                    ws.send(JSON.stringify({'user_id': '{{ user.id }}', 'opr_msg': false}));
                    open_falg = true;
                };

                ws.onmessage = function (evt) {
                    var msg = evt.data;
                    console.log("收到了来自服务器websocket消息" + msg);
                    var msg_dict = JSON.parse(msg);


                    var alarm_id = msg_dict['alarm_reader_id'];
                    for (var ix = 0; ix < alarms.length; ix++) {
                        if (alarms[ix] === alarm_id) {
                            return;
                        }
                    }
                    alarms.push(alarm_id);
                    notice.options['onclick'] = function () {
                        //标记该警报为已经阅读
                        post({
                            "param": JSON.stringify({'alarm_reader_id': alarm_id}),
                            "action": "read_alarm_log"
                        }, '/handler/log/', function (data) {
                        });
                    };
                    notice.error(msg_dict['msg']);

                };

                ws.onclose = function () {
                    // 关闭 websocket
                    /**
                     layer.alert("网络异常，与远程服务器通信中断！", {icon: 5}, function () {
                    layer.closeAll();
                });**/
                    open_falg = false;
                };
            }

            connect();

            //定时1分钟检查连接是否关闭，如果关闭则重新开启
            setInterval(function () {
                if (!open_falg) {
                    connect();
                }
            }, 10 * 1000);

            //4小时主动关一下连接，避免mysql连接超时
            setInterval(function () {
                ws.close();
                open_falg = false;
            }, 4 * 3600 * 1000);

        } else {

            layer.alert("您当前的浏览器不支持该系统，请更换成谷歌浏览器！", {icon: 5}, function () {
                layer.closeAll();
            });
        }

    });


</script>

</html>